<template>
  <a-drawer
      :visible="visible"
      title="线索明细"
      :width="$store.getters.isMobile ? '100%' : 1050"
      @close="onClose"
  >
    <a-table
        :columns="columns"
        :dataSource="tableData"
        bordered
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{
        x: 'max-content',
      }"
    >
      <template #title>
        <div class="flex justify-between header-clue">
          <div class="flex-1">
            <a-form layout="vertical">
              <a-row :gutter="8" :wrap="true">
                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-input
                        placeHolder="搜索客户名称"
                        v-model:value="searchParams.contactName"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-input
                        placeHolder="搜索客户电话"
                        v-model:value="searchParams.contactPhone"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-input
                        placeHolder="搜索公司名称"
                        v-model:value="searchParams.company"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-select
                        style="width: 100%"
                        v-model:value="searchParams.villageId"
                        placeholder="请选择意向项目"
                        :options="optionsBuild"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-select
                        style="width: 100%"
                        v-model:value="searchParams.source"
                        :options="clueSource"
                        placeholder="请选择来源"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-select
                        style="width: 100%"
                        v-model:value="searchParams.clueFrom"
                        :options="optionsClueFrom"
                        placeholder="请选择线索来源"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-select
                        style="width: 100%"
                        v-model:value="searchParams.status"
                        :options="optionsStatus"
                        placeholder="请选择线索状态"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item>
                    <a-range-picker
                        class="w-100p"
                        v-model:value="searchParams.created_time"
                        :valueFormat="dateFormatStr"
                        @change="clueTimeChange"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="$store.getters.isMobile ? 12 : 6">
                  <a-form-item label="">
                    <a-space>
                      <a-button @click="reset">重置</a-button>
                      <a-button type="primary" @click="onSearch">
                        搜索
                      </a-button>
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'contact_name'">
          <span>{{ record.contact_name }}</span>
        </template>
        <template v-if="column.key === 'contact_phone'">
          <span>{{ record.contact_phone }}</span>
        </template>
        <template v-if="column.key === 'company'">
          <span>{{ record.company || "--" }}</span>
        </template>
        <template v-if="column.key === 'status'">
          <a-tag>{{ record.cluestatus?.name }}</a-tag>
          <a-tag color="red" style="margin-top: 4px" v-if="record.about_expire == true">即将回收
          </a-tag>
        </template>
        <template v-if="column.key === 'clue_from'">
          <span>{{ record.clue_form_txt }}</span>
          <span v-if="record.team_user_name">-{{ record.team_user_name }}</span>
        </template>
        <template v-if="column.key === 'channel_company'">
          <span>{{ record.channel_company_name || '--' }}</span>
        </template>

        <template v-if="column.key === 'updated_at'">
          <span>{{ record.updated_at }}</span>
        </template>
        <template v-if="column.key === 'remark'">
          <span>{{ record.remark || "--" }}</span>
        </template>

        <template v-if="column.key === 'village_name'">
          <span>{{ record.village_name || "--" }}</span>
        </template>
        <template v-if="column.key === 'requiredArea'">
          <span
          >{{ record.expect_area_min }}-{{ record.expect_area_max }}m²</span
          >
        </template>
      </template>
    </a-table>
  </a-drawer>
</template>

<script>
import {ref, toRefs, watch, reactive, computed} from "vue";
import request from "../../../../common/utils/request";
import {Form} from "ant-design-vue";

const dateFormatStr = "YYYY-MM-DD";
const useForm = Form.useForm;
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    uid: {
      type: [String, Number],
      default: 0,
    },
    sourceType: {
      type: String,
      default: "channel",
    },
  },
  setup(props, context) {
    const state = reactive({
      clueSource: [],
    });

    const columns = [
      {
        title: "客户名称",
        key: "contact_name",
        width: "10%",
      },
      {title: "客户电话", key: "contact_phone", width: "10%"},
      {
        title: "公司",
        key: "company",
        width: "10%",
      },
      {
        title: "线索状态",
        key: "status",
        width: "10%",
      },
      {
        title: "线索来源",
        key: "clue_from",
        width: 200,
      },
      {
        title: "所属渠道公司",
        key: "channel_company",
        width: 240,
      },
      {
        title: "更新时间",
        key: "updated_at",
        width: 200,
      },

      {
        title: "意向项目",
        key: "village_name",
        width: "10%",
      },
      {
        title: "需求面积段",
        key: "requiredArea",
        width: 200,
      },
      {
        title: "备注",
        key: "remark",
        width: 200,
      },
    ];
    const searchParams = reactive({
      contactName: "",
      contactPhone: "",
      company: "",
      villageId: undefined,
      clueFrom: undefined,
      status: undefined,
      created_time: undefined,
      startDate: undefined,
      endDate: undefined,
      source: undefined,
    });

    const {resetFields} = useForm(searchParams, {});

    const clueTimeChange = (date) => {
      state.created_time = date;
    };

    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));

    const tableData = ref([]);
    const getClueList = (init = false) => {
      if (init) {
        page.value = 1;
      }
      const param = {
        page: page.value,
        pageSize: limit.value,
        //   managerAuth: managerAuth.value,
      };
      if (props.sourceType == "user") {
        param.teamUid = props.uid;
      } else {
        param.channelId = props.id;
      }
      Object.keys(searchParams).forEach((key) => {
        if (key != "created_time") {
          if (searchParams[key]) {
            param[key] = searchParams[key];
          }
        } else {
          if (searchParams[key]) {
            param.startDate = searchParams[key][0];
            param.endDate = searchParams[key][1];
          }
        }
      });

      console.log(param);
      request.get("/org", "/business/clue", param).then((res) => {
        console.log(res);
        tableData.value = res.list;
        total.value = res.total || 0;
      });
    };

    // 意向项目
    const optionsBuild = ref([]);
    const getVillageList = () => {
      request
          .get("/org", "/build/villageAndBuildList/v2", {checked: 1})
          .then((res) => {
            let vList = [];
            res.villageList.forEach((item) => {
              vList.push({
                label: item.name,
                value: item.id,
              });
            });
            optionsBuild.value = vList;
          });
    };

    // 线索来源
    const optionsClueFrom = ref([]);
    const getClueFrom = () => {
      optionsClueFrom.value = [];
      request.get("/org", "/user/clue/getSourceList").then((res) => {
        // console.log(res.data.clueFromData);
        const clueFromData = res?.data?.clueFromData;
        Object.keys(clueFromData).forEach((key) => {
          optionsClueFrom.value.push({
            label: clueFromData[key],
            value: key,
          });
        });

        // 来源
        state.clueSource = res?.data?.clueSourceData.map(item => {
          return {
            value: item.key,
            label: item.value,
          }
        })
      });
    };

    //线索状态
    const optionsStatus = ref([]);
    const getStatusList = () => {
      request.get("/org", "/business/clueStatus/clueStatusList").then((res) => {
        console.log(res);
        const temList = res.list.map((item) => {
          return {
            label: item.name,
            value: item.status,
          };
        });
        optionsStatus.value = temList;
      });
    };
    const init = () => {
      getVillageList();
      getClueFrom();
      getStatusList();
      getClueList(true);
    };

    const onClose = () => {
      context.emit("closeDetail");
    };

    const handleTableChange = (pager) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getClueList();
    };

    const reset = () => {
      resetFields();
      getClueList(true);
    };

    const onSearch = () => {
      getClueList(true);
    };

    watch(
        () => props.visible,
        (val) => {
          if (val) {
            init();
          } else {
            resetFields();
          }
        }
    );
    return {
      columns,
      tableData,
      onClose,
      searchParams,
      reset,
      onSearch,
      optionsBuild,
      dateFormatStr,
      optionsClueFrom,
      optionsStatus,
      pagination,
      handleTableChange,
      clueTimeChange,
      ...toRefs(state),

    };
  },
};
</script>

<style lang="less" scoped>
.header-clue {
  padding: 0 16px;
}
</style>
